<template>
  <section class="attribute-actions">
    <mini-button icon="el-icon-delete" @click="handleRemove" />
    <mini-button icon="el-icon-circle-plus-outline" @click="handleAdd" />
  </section>
</template>

<script>
import Vue from "vue";
Vue.component("MiniButton", {
  // ... 选项 ...
  template: `
    <el-button
      size="mini"
      type="primary"
      :icon="icon"
      @click="handleClick"
    ></el-button>`,
  props: {
    icon: {
      type: String
    }
  },
  methods: {
    handleClick() {
      this.$emit("click");
    }
  }
});

Vue.component("NoAttribute", {
  template: `
  <el-button
    type="primary"
    v-if="!value || value.length === 0"
    @click="handleClick"
  >添加</el-button>`,
  props: {
    value: {
      type: Array
    }
  },
  methods: {
    handleClick() {
      this.$emit("click");
    }
  }
});

export default {
  name: "AttributeActions",
  methods: {
    handleRemove() {
      this.$emit("remove");
    },
    handleAdd() {
      this.$emit("add");
    }
  }
};
</script>

<style scoped>
.el-button--mini {
  padding: 3px 6px;
}
.el-button + .el-button {
  margin-left: 3px;
}
.attribute-actions {
  padding-left: 4px;
}
.preview-container {
  padding: 0 20px;
}
</style>
